<template>
  <div class="app-container">
    <el-tabs v-model="activeName" class="demo-tabs">
    <el-tab-pane label="材料提交" name="first">
      <h2>任务书：</h2>
      <vue-office-docx
        :src="'http://localhost:8080'+ materialModel.taskDoc"
        style="height: 50vh;width: 80%;margin-top: 10px;"
        @rendered="renderedHandler"
        @error="errorHandler"
    />
    <h2 style="margin-top: 20px;">ui原型图:</h2>
    <img :src="'http://localhost:8080' + materialModel.uiImg" style="width: 80%;margin-top: 10px;">
    <h2 style="margin-top: 20px;">数据库表:</h2>
    <img :src="'http://localhost:8080' + materialModel.dataImg" style="width: 80%;margin-top: 10px;">
    </el-tab-pane>
    <el-tab-pane label="项目展示" name="second">
      <h2>演示视频：</h2>
      <video :src="'http://localhost:8080' + projectModel.demoVideo" controls="controls" style="width: 80%;margin-top: 10px;"></video>
      <h2>功能描述：</h2>
      <el-input type="textarea" v-model="projectModel.funDesc" placeholder="" disabled></el-input>
    </el-tab-pane>
    <el-tab-pane label="论文上传" name="third">
      <h2>论文：</h2>
      <vue-office-docx
        :src="'http://localhost:8080'+ paperModel.paperDoc"
        style="height: 65vh;width: 80%;margin-top: 10px;"
        @rendered="renderedHandler"
        @error="errorHandler"
    />
    </el-tab-pane>
  </el-tabs>
  </div>
</template>

<script setup>
  import { onMounted, ref } from 'vue'
import { getMaterialByworkId } from '../../../api/manage/material';
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'
import { useRoute } from 'vue-router';
import { getProjectByworkId } from '../../../api/manage/project';
import { getPaperByworkId } from '../../../api/manage/paper';
  const activeName = ref('first')
  const route = useRoute()
  const materialModel = ref({})
  const projectModel = ref({})
  const paperModel = ref({})
  const getMaterial = async () => {
    const res = await getMaterialByworkId(route.query.id)
    materialModel.value = res.data
  }

  const getProject = async () => {
    const res = await getProjectByworkId(route.query.id)
    projectModel.value = res.data
  }

  const getPaper = async () => {
    const res = await getPaperByworkId(route.query.id)
    paperModel.value = res.data
  }

  onMounted(() => {
    getMaterial()
    getProject()
    getPaper()
  })

  const renderedHandler=()=>{
  console.log("渲染完成")
}
const errorHandler=()=>{
  console.log("渲染失败")
}


</script>

<style lang="scss" scoped>

</style>